<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-sacle=1.0">
    <title>CSS 布局练习</title>
    <link rel="stylesheet" href="style.css" </head>

<body>
    <header>
        <h1>CSS布局练习 </h1>
    </header>
    <main>
        <section>
            <h2>float布局</h2>
            <p>使用float属性进行布局，虽然比较繁琐，但非常灵活，可以实现各种复杂的布局。</p>
        </section>
        <section>
            <h2>flexbox</h2>
            <p>flex布局模型的主要目的是提供更有效率的布局方式，尤其是当容器内元素的尺寸不固定的时候更能表现出它的优势。它能够自动识别子元素的尺寸,从而为盒模型提供更高的灵活性.</p>
            <div id="flexbox">
                <p>0010010000001001001</p>
                <p>0010010000001001001</p>
                <p>0010010000001</p>
                <p>002002002002</p>
                <p class="fz-5">003</p>
                <p>004</p>
                <p>005</p>
                <p>006</p>
                <p>007</p>
                <p>008</p>
                <p>009</p>
                <p>010</p>
            </div>
        </section>
        <section>
            <h2>column</h2>
            <p>分栏布局提供了一种将内容按列排列的方法,就像在报纸上看到的那样.但是创建的列不能单独设置样式,无法使一列比其他比列大,或更改单个列的背景或文本颜色. </p>
            <div id="column">
                <p> 1 column-count 属性用来设置列的数量。浏览器可以计算并分配每个列的空间。</p>
                <p class="break-avoid">2 column-width 属性用来指定列的宽度。浏览器将为提供指定大小的列。然后，剩余的空间将在现有列之间共享。</p>
                <p>3 column-gap 属性用来更改列之间的间距大小。</p>
                <p>4 column-rule 属性用来指定列之间的边框，接受同border的值。</p>
                <p>5 column-span 属性可以实现元素跨越所有栏。值为none和all。多栏会中断，并在跨栏元素之后继续创建新的列框集。</p>
            </div>
        </section>
        <section id="grid">
            <header>这里放导航条</header>
            <article>
                <h1>《You Have Only One Life》</h1>
                <p>There are moments in life when you miss someone so much that you just want to pick them from your
                    dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want
                    to be,because you have only one life and one chance to do all the things you want to do.</p>
                <p>May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to
                    keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that
                    it hurts you,it probably hurts the other person, too.</p>
                <p>The happiest of people don’t necessarily have the best of everything;they just make the most of
                    everything that comes along their way.Happiness lies for those who cry,those who hurt, those who
                    have searched,and those who have tried,for only they can appreciate the importance of people</p>
            </article>
        </section>
    </main>
    <footer>
        <p><span>《网页设计与制作》 </span><span>学号P171212387</span> <span>指导教师：yangzh</span></p>
    </footer>
</body>